<template>
  <div id="app">
    <strong>当前count是 <span style="color: red">{{countFlag}}</span> 数</strong>
    <span class="count" >{{count}}</span>
     <button @click="myAdd(2)">click</button>
     <button @click="asyncAdd(3)">async click</button>
  </div>
</template>

<script>
  import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
  export default {
    name: 'App',
    methods:{
      ...mapMutations(["add"]),
      ...mapActions({asyncAdd:"add"}),
      myAdd(){
        //载荷的准备 这个过程可以很复杂!!
        this.add(2)
      }
    },
    computed:{
      ...mapState(["count"]),
      ...mapGetters(["countFlag"])
    }
  }
</script>

<style scoped>
  .count{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: pink;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
  }
</style>
